<template>
  <uni-popup ref="popupBullet" type="center" :is-mask-click="props.option.click">
    <view class="bullet-box">
      <view class="main-box">
        <view class="title" v-if="props.option.title">{{props.option.title}}</view>
        <view class="sub-title" v-if="props.option.subTitle">{{props.option.subTitle}}</view>
        <view class="btn-box">
          <slot></slot>
        </view>
      </view>
      <view class="btn-close">
        <image src="https://img.qumoyugo.com/webimgbg/pets-icon-close-white-cirle_n.svg" style="width: 64rpx; height: 64rpx" @click="close"></image>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref } from 'vue'
const popupBullet = ref(null)
const emit = defineEmits(['close'])
const props = defineProps({
  option: {
    type: Object,
    default: () => {
      return {
        title: '',
        subTitle: '',
        img: ''
      }
    }
  }
})
const show = () => {
  popupBullet.value.open()
}
const close = () => {
  popupBullet.value.close()
  emit('close')
}
defineExpose({
  show,
  close
})
</script>

<style scoped lang="scss">
.bullet-box{
  width: 560rpx;
  color: #414141;
  font-size: 32rpx;
  text-align: center;
  // position: fixed;
  // top: 20vh;
  // left: 50%;
  // transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  .main-box{
    background: #FFF8F0;
    border-radius: 20rpx;
    padding: 40rpx;
  }
  .btn-box{
    margin-top: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .sub-title{
    font-size: 28rpx;
  }
  .btn-close{
    width: 70rpx;
    height: 70rpx;
    margin: 80rpx auto 0 auto;
  }
  .title{
    font-weight: bold;
    line-height: 40rpx;
    text-align: left;
  }
}
</style>
